<template>
  <div class="feedback-container">
    <van-nav-bar
        title="意见反馈"
        left-arrow
        @click-left="onClickLeft"
    />
    <form @submit.prevent="submitFeedback">
      <div class="feedback-type-section">
        <p>请选择类型</p>
        <label class="radio-label">
          <input type="radio" v-model="feedbackType" value="产品功能问题反馈" />
          产品功能问题反馈
        </label>
        <label class="radio-label">
          <input type="radio" v-model="feedbackType" value="建议及意见反馈" />
          建议及意见反馈
        </label>
        <label class="radio-label">
          <input type="radio" v-model="feedbackType" value="投诉客服其他问题" />
          投诉客服其他问题
        </label>
      </div>
      <div class="feedback-description-section">
        <p>相关描述</p>
        <textarea v-model="description" placeholder="客官~您对我们的服务还满意吗，请给予我们你的意见我们将做的更好~"></textarea>
      </div>
<!--      <div class="feedback-image-section">-->
<!--        <p>选择图片</p>-->
<!--        <input type="file" accept="image/*" @change="handleFileUpload" />-->
<!--      </div>-->
      <div style="width: 100%">
        <el-upload
            class="el-upload"
            action="http://1.94.221.254:9999/api/qcfw-user/upload/fileUpload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
        >
          <van-cell title="选择图片" is-link @click="showAvatar=true" style="width: 500%">
            <van-image
                round
                width="25px"
                height="25px"
                fit="cover"
                :src="this.user.avatar"
            />
          </van-cell>
        </el-upload>
      </div>
      <div class="feedback-contact-section">
        <p>联系方式</p>
        <input type="text" v-model="contact" placeholder="请输入您的联系电话" />
      </div>
      <button type="submit">提交反馈</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      feedbackType: "",
      description: "",
      contact: "",
      user:{},
      showAvatar:false
    };
  },
  methods: {
    submitFeedback() {
      // 使用axios发送POST请求到后端
      const feedback = {
        feedbackType: this.feedbackType,
        description: this.description,
        contact: this.contact
      };
      // 这里假设已经配置好axios
      this.axios.post("http://1.94.221.254:9999/leaders/api/feedback/save", feedback).then(response => {
        alert('反馈成功');
        this.$router.push('/shezhi')
      }).catch(error => {
        alert(error.response.data);
      });
    },
    onClickLeft(){
      this.$router.push('/shezhi')
    },
    handleAvatarSuccess(res, file) {
      console.log(URL.createObjectURL(file.raw));
      console.log(res);
      this.user.avatar=res.data;
      console.log(this.user.avatar);
    }
    // handleFileUpload(event) {
    //   // 这里可以处理文件上传逻辑，此处简单起见，暂不做处理
    //   const file = event.target.files[0];
    //   console.log("上传文件：", file);
    // }
  }
};
</script>

<style scoped>
.feedback-container {
              width: 400px;
              margin: 0 auto;
              padding: 20px;
              border: 1px solid #ccc;
              border-radius: 5px;
              background-color: #fff;
            }

.feedback-title {
              text-align: center;
            }

.feedback-type-section {
                     margin-bottom: 10px;
                   }

.radio-label {
           display: block;
           margin-bottom: 5px;
         }

.feedback-description-section {
                            margin-bottom: 10px;
                          }

.feedback-description-section textarea {
                            width: 100%;
                            height: 100px;
                          }

.feedback-image-section {
                      margin-bottom: 10px;
                    }

.feedback-contact-section {
                        margin-bottom: 10px;
                      }

.feedback-contact-section input {
                        width: 100%;
                      }
</style>